<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	 <style type="text/css">
			   .dd {
			   	width:100px;
			   	height:100px;
			   	background-color:red;
			   		z-index:-10;
			   }
			     .test {
			   	width:50px;
			   	height:100px;
			   	background-color:yellow;
					top:200px; 
				  left:200px; 
							   		 
			   }
			   ._jsPlumb_connector{
			   	z-index:-9999999;
			   }
			   ._jsPlumb_endpoint{
			   	z-index:0;
			   }
	   </style>
	<!--[if IE]>
		<script type="text/javascript" src="../js/excanvas.js"></script>
	<![endif]-->
	
    <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
		<script type="text/javascript" src="../js/lib/mootools-1.2.4.4-more.js"></script>
		<script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
		<script type="text/javascript" src="../js/1.2.6/jsPlumb-1.2.6-RC1.js"></script>
		<script type="text/javascript" src="../js/1.2.6/jsPlumb-defaults-1.2.6-RC1.js"></script>
		<script type="text/javascript" src="../js/1.2.6/mootools.jsPlumb-1.2.6-RC1.js"></script>	
		 <script>  
									 
window.addEvent('domready', function() {	
						  
		
var exampleGreyEndpointOptions = {
	endpoint:new jsPlumb.Endpoints.Rectangle(),
	style:{ width:25, height:21, fillStyle:'#666' },
	isSource:true,maxConnections :11,
	connectorStyle : { strokeStyle:"#666" },
	isTarget:true,scope:"ex2",
	connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
};
var exampleGreyEndpointOptions1 = {
  endpoint:new jsPlumb.Endpoints.Dot({radius:15}),
	style:{ width:25, height:21, fillStyle:'blue' },
	isSource:true,maxConnections :11,
	connectorStyle : { strokeStyle:"blue" },
	isTarget:true,scope:"ex1",
	connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
};
var exampleGreyEndpointOptions2 = {
  endpoint:new jsPlumb.Endpoints.Dot({radius:25}),
	style:{ width:25, height:21, fillStyle:'green' },
	isSource:true,maxConnections :11,
	connectorStyle : { strokeStyle:"green" },
	isTarget:true,scope:"ex3",
	connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
};
   



jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions)); 
jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"TopCenter"},    exampleGreyEndpointOptions1)); 
jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"LeftMiddle"},   exampleGreyEndpointOptions2));  
       

jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions));     
jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"TopCenter"},    exampleGreyEndpointOptions1));
jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"LeftMiddle"},   exampleGreyEndpointOptions2));       
    
 
jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions)); 
jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"TopCenter"},    exampleGreyEndpointOptions1)); 
jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"LeftMiddle"},   exampleGreyEndpointOptions2));  
     	 
		 
jsPlumb.draggable($('element1'));
jsPlumb.draggable($('element2'));
jsPlumb.draggable($('element3'));
						  
					 });
					 
					 
					 
					 
		</script>


</head>
<body>
 

<div id="element1" style="float:right;" class="dd">1</div>
<div id="element2"   class="dd">2</div>
<div id="element3"    class="test">3</div>
</body>
</html>